<template>
    <!-- van-list 关闭位置监听自动调用load事件 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
        <comment-item @open-reply="$emit('open-reply',$event)" v-for="item in list" :key="item.com_id" :comment="item"></comment-item>
    </van-list>
</template>
<script>
import { getCommentList } from '@/api/comment'
import CommentItem from './comment-item.vue';
  export default {
    name: "CommentList",
    components:{CommentItem},
    props: {
      // 源id，文章id或者评论id
      sourceId:{
        type:[String,Number],
        required:true
      },
      // 判断操作类型
      type:{
        default:'a', 
        validator(val){
          return ['a','c'].includes(val)
        }
      },
      // 列表数据
      list:{
        type:Array,
        default:()=>[]
      }
    },
    data() {
      return {
        // list: [], // 评论列表
        loading: false, // 上拉加载更多的 loading
        finished: false, // 是否加载结束
        offset:null, // 偏移量
        limit:10 // 每页数量
      };
    },
    created(){
      this.loading = true  // 自己打开loading
      this.onLoad()  // 解决长文章一开始不显示内容的问题
    },
    methods: {
      async onLoad() {
        // 1. 发送请求
        try {
          let { data } = await getCommentList({
            type:this.type, // 类型，a表示获取文章的评论，c表示获取某个评论的回复
            source: this.sourceId,  // 源ID，文章ID   或者 评论id
            offset:this.offset,
            limit: this.limit
          })
          // 2. 追加数据到列表
          this.list.push(...data.data.results)
          // 通知父组件更新总数
          this.$emit('update-total',data.data.total_count)
          // 3. 关闭loading
          this.loading = false
          // 4. 判断是否结束
          if(data.data.results.length < this.limit){
            // 4.1 结束了finished 为true
            this.finished = true
          }else{
            // 4.2 页码变化
            this.offset = data.data.last_id
          }
        } catch (error) {
          console.log(error);
        }
      }
    }
  };
</script>